<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="方案">
                    <el-select v-model="form.data.id" clearable class="filter-item" style="width: 250px;">
                        <el-option
                            v-for="(item, index) in tableData"
                            :key="index"
                            :label="item.id +' ) '+ item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="handleSearch">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <dialog-form
            :data="form.data"
            v-on:submit="onFormSubmit"
            v-on:cancel="form.show = false"
            v-on:delete="onFormDelete">
        </dialog-form>

    </div>
</template>

<script>
import dialogForm from './form'
import TagOs from '~/components/Tag/os'
import TagAppSourceType from '~/components/Tag/app-source-type'
export default {
    components: {
        dialogForm,
        TagOs,
        TagAppSourceType,
    },
    data() {
        return {
            search: {

            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 100,
            pageOptions: this.$store.state.backend.pageOptions,
            totalDataNumber: 0,
            options: this.$store.state.appSourceConfig.options,
            form: {
                data: {
                    id: '',
                },
                show: false,
            }
        }
    },
    watch: {
        'form.data.id' (val) {
            this.tableData.map(v => {
                if (v.id === val) this.form.data = this.$helper.deepClone(v);
            })
        },
        '$route'(route) {
            if (route.name === 'appSource.config' && route.query && route.query.hasOwnProperty('id')) {
                this.form.data.id = parseInt(route.query.id);
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('appSourceConfig/Lists', filter).then(res => {
                this.tableData = res.data.data;
                this.totalDataNumber = res.data.meta.total;

                // 加载完后再使用传递的data
                if (this.$route.query.id) this.form.data.id = parseInt(this.$route.query.id);
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        create() {
            this.form.data = {};
        },
        edit(row) {
            this.form.data = row;
        },
        onFormSubmit() {
            this.handleSearch();
        },
        onFormDelete() {
            this.handleSearch();
            this.form.data = {};
        }
    },
    created() {
        this.initData();
    }
}
</script>

<style scoped>

</style>

